<template>
	<view class="home">
		<swiper 
		:indicator-dots="true" 
		:autoplay="true" 
		:interval="3000" 
		:duration="1000"
		indicator-color="pink"
		indicator-active-color="green"
		>
			<swiper-item v-for="item in swiperList" :key="item.goods_id">
				<navigator :url="'/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id">
					<image class="img" :src="item.image_src" mode="widthFix"></image>
				</navigator>
			</swiper-item>
		</swiper>
		<view class="iconCount">
			<image style="width: 120rpx;" @click="handlerImg(item)" v-for="item in navList" :key="item.name" :src="item.image_src" mode="widthFix"></image>
		</view>
		<view class="floorListBox" v-for="item in floorList" :key="item.floor_title.name">
			<image 
			mode="widthFix" 
			:src="item.floor_title.image_src"
			alt="" 
			mode="widthFix"
			style="width: 1000rpx;"/>
			<view class="imgList">
				<view class="left-img"
				@click="handlerFloorNav(item.product_list[0].url)">
					<image :src="item.product_list[0].image_src" mode="widthFix" :style="{width:item.product_list[0].image_width + 'rpx' }"/>
				</view>
				<view 
				class="right-img">
					<template v-if="index !== 0" 
					v-for="(item2, index) in item.product_list" 
					:key="item2.name"
					>
						<image 
						@click="handlerFloorNav(item2.url)"
						class="img"
						:src="item2.image_src" 
						mode="widthFix" 
						:style="{width:item2.image_width + 'rpx'}"></image>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { $http } from '@escook/request-miniprogram';
	export default {
		data() {
			return {
				swiperList: [],
				navList: [],
				floorList: []
			};
		},
		onLoad() {
			this.getSwiperList()
			this.getNavList()
			this.getFloorList()
		},
		methods: {
			async getSwiperList() {
				const {data: res} = await uni.$http.get('/api/public/v1/home/swiperdata')
				// console.log(res)
				if (res.meta.status !== 200) {
					uni.$showMsg()
					return
				}
				this.swiperList = res.message;
			},
			async getNavList() {
				const {data: res} = await uni.$http.get('/api/public/v1/home/catitems')
				if (res.meta.status !== 200) {
					uni.$showMsg()
					return
				}
				this.navList = res.message;
			},
			async getFloorList() {
				const {data: res} = await uni.$http.get('/api/public/v1/home/floordata')
				res.message.forEach(item => {
					item.product_list.forEach(item2 => {
						let questionIndex = item2.navigator_url.indexOf('?');
						const newUrl = {
							url: '/subpkg/good_list/good_list' + item2.navigator_url.slice(questionIndex)
						}
						Object.assign(item2, newUrl)
					})
				})
				if (res.meta.status !== 200) {
					uni.$showMsg()
					return
				}
				this.floorList = res.message
			},
			handlerImg(item) {
				console.log(item);
				if (item.name === '分类') uni.switchTab({
					url: '/pages/cate/cate'
				})
			},
			handlerFloorNav(url) {
				console.log(url)
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
.home{
	.img{
		width: 100%;
	}
	.iconCount{
		width: 100%;
		display: flex;
		justify-content: space-around;
		padding: 10rpx 20rpx;
		box-sizing: border-box
	}
	.floorListBox{
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;
	}
	.imgList{
		display: flex;
		flex-wrap: nowrap;
		.right-img{
			display: flex;
			flex-wrap: wrap;
			box-sizing: border-box;
			.img{
				margin-left: 5rpx;
			}
		}
	}
}
</style>
